<!--  -->
<template>
    <view class="box">

        <image class="jiantouStyle" src="/pages/images/jiantou.jpg"></image>
        <image class='m-compassbg' src='https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/Remove-bg.ai_1708963347546.png'
            :style="{ transform: `rotate(${rotate}deg)` }"></image>
        <view class="compassStyle">{{ area }} {{ detailArea }}°</view>
        <view class='lable'>
            #等风来，不如追风去#
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            rotate: 0,
            area: "东偏北",
            detailArea: 90
        };
    },

    components: {},

    computed: {},

    mounted() { },

    created() { },
    onLoad: function () {
        var that = this;
        uni.onCompassChange(function (res) {
            // 计算应偏移度数
            var rotate = res.direction.toFixed(0)
            var area = parseInt(rotate / 90)
            var detailArea = rotate % 90
            that.rotate = rotate
            //console.log(res.direction.toFixed(0), rotate)
            if (rotate > 157 && rotate <= 202) {

                that.area = "南（S）"
                //that.detailArea = 90 - detailArea

            }
            else if (rotate > 112 && rotate <= 157) {

                that.area = "东南（SE）"


            }
            else if (rotate > 202 && rotate <= 247) {

                that.area = "西南（SW）"


            }
            else if ((rotate > 337 && rotate <= 360) || (rotate > 0 && rotate <= 22)) {

                that.area = "北（N）"


            }
            else if (rotate > 22 && rotate <= 67) {

                that.area = "东北（NE）"


            }
            else if (rotate > 292 && rotate <= 337) {

                that.area = "西北（NW）"


            }
            else if (rotate > 67 && rotate <= 112) {

                that.area = "东（E）"

            } else if (rotate > 247 && rotate <= 292) {


                that.area = "西（W）"


            }
            that.detailArea = rotate;
        });
    },

    methods: {
        rotateImage(degree) {
            this.rotate += degree;
        }
    }
}

</script>
<style lang='scss' scoped>
.box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
}

.title {
    font-size: 30px;
    font-weight: bold;
    color: darkkhaki;
}

.m-compassbg {
    width: 100vw;
    height: 100vw;
    border-radius: 50%;
}

.jiantouStyle {
    width: 90px;
    height: 90px;
    margin-bottom: 30px;
}

.compassStyle {
    font-size: 60rpx;
    margin-top: 80rpx;
}

.lable {
    margin-top: 20px;
    font-size: 26px;
    color: lightseagreen;
}
</style>